import { useEffect, useState } from 'react';

interface LoadingBarProps {
  loading: boolean;
}

const LoadingBar = ({ loading }: LoadingBarProps) => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (loading) {
      setProgress(0);
      
      // 模拟进度条加载
      const timer1 = setTimeout(() => setProgress(30), 100);
      const timer2 = setTimeout(() => setProgress(60), 300);
      const timer3 = setTimeout(() => setProgress(80), 600);
      
      return () => {
        clearTimeout(timer1);
        clearTimeout(timer2);
        clearTimeout(timer3);
      };
    } else {
      // 完成时快速到 100% 然后消失
      setProgress(100);
      const timer = setTimeout(() => setProgress(0), 400);
      return () => clearTimeout(timer);
    }
  }, [loading]);

  if (progress === 0) return null;

  return (
    <>
      <style>{`
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
        
        @keyframes pulse-glow {
          0%, 100% {
            box-shadow: 
              0 0 10px rgba(0, 212, 255, 0.6),
              0 0 20px rgba(0, 212, 255, 0.4),
              0 0 30px rgba(0, 212, 255, 0.2);
          }
          50% {
            box-shadow: 
              0 0 20px rgba(0, 212, 255, 0.8),
              0 0 30px rgba(0, 212, 255, 0.6),
              0 0 40px rgba(0, 212, 255, 0.4);
          }
        }
        
        .loading-bar-shimmer {
          position: relative;
          overflow: hidden;
        }
        
        .loading-bar-shimmer::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4) 50%,
            transparent
          );
          animation: shimmer 1.5s infinite;
        }
      `}</style>
      
      <div className="fixed top-0 left-0 right-0 z-50 h-1">
        <div
          className="loading-bar-shimmer h-full bg-gradient-to-r from-[#00d4ff] via-[#00ffff] to-[#0099cc] transition-all duration-300 ease-out"
          style={{
            width: `${progress}%`,
            animation: 'pulse-glow 2s ease-in-out infinite'
          }}
        />
      </div>
    </>
  );
};

export default LoadingBar;
